<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

	<xsl:param name="render" />
	
	<xsl:template match="/">
		<xsl:text disable-output-escaping="yes">&lt;!DOCTYPE html></xsl:text>
		<html>
		<head>
			<title>Uppgift 4</title>
			<!-- <link rel="Stylesheet" type="text/css" href="style.css" /> -->
		</head>
		<body>
		
			<div class="box">
					<xsl:variable name="headerText" select="concat(result/@event, ' - ', result/location/city, ', ', result/location/country)" />

				<xsl:choose>
					<xsl:when test="$render = 'xhtml_svg'">
						<xsl:call-template name="xhtml">
							<xsl:with-param name="header" select="$headerText" />
						</xsl:call-template>
						<xsl:call-template name="svg">
							<xsl:with-param name="header" select="$headerText" />
						</xsl:call-template>
					</xsl:when>
					<xsl:when test="$render = 'svg'">
						<xsl:call-template name="svg2">
							<xsl:with-param name="header" select="$headerText" />
						</xsl:call-template>
					</xsl:when>
					<xsl:otherwise>
						<xsl:call-template name="xhtml">
							<xsl:with-param name="header" select="$headerText" />
						</xsl:call-template>
					</xsl:otherwise>
				</xsl:choose>
			</div>
		</body>
		</html>
	</xsl:template>
	
	<xsl:template name="xhtml">
		<xsl:param name="header" />
		<div class="result">
			<p class="header">
				<xsl:value-of select="$header" />
			</p>
			<table>
				<tr>
					<!-- Hämta ut dynamiskt från elementnamn 
					<xsl:variable name="name" select="result/summary/country/local-name()"/>-->
					<th>Country</th>
					<th>Gold</th>
					<th>Silver</th>
					<th>Bronze</th>
				</tr>
				<xsl:for-each select="//result/summary/country">
				<tr>
					<td><xsl:value-of select="@name" /></td>
					<td><xsl:value-of select="gold" /></td>
					<td><xsl:value-of select="silver" /></td>
					<td><xsl:value-of select="bronze" /></td>
				</tr>
				</xsl:for-each>
			</table>
		</div>
	</xsl:template>
	
	<xsl:template name="svg">
		<xsl:param name="header" />
		<div class="result">
		
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			
			<text x="30" y="20" style="font-size:1.2em;font-family:Verdana;" >
				<xsl:value-of select="$header" />
			</text>

			<xsl:for-each select="//result/summary/country">
				<xsl:sort select="gold" data-type="number" order="descending" />
				<xsl:variable name="gold" select="gold" />
				<text x="10" y="{position()*30+15}"><xsl:value-of select="@name" /></text>
				<rect x="70" y="{position()*30}" width="" height="15" style="stroke-width:1;stroke:rgb(0,0,0)">
					<animateColor id="a1" attributeName="fill" from="white" to="gold" dur="3s" fill="freeze" />
					<animate attributeName="width" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="0" to="{$gold*10}" />
				</rect>
				<text x="{$gold*10+75}" y="{position()*30+15}" style="visibility:hidden">
					<set attributeName="visibility" attributeType="CSS" to="visible" begin="2s" dur="0s" fill="freeze" />
					<xsl:value-of select="$gold" />
				</text>
			</xsl:for-each>
			</svg>
		</div>
	</xsl:template>

	<xsl:template name="svg2">
		<xsl:param name="header" />
		<div class="result">

			<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

			<text x="40" y="30" style="font-size:1.2em;" >
				<xsl:value-of select="$header" />
			</text>

			<xsl:for-each select="//result/summary/country">
				<xsl:sort select="gold" data-type="number" order="descending" />
				<xsl:sort select="silver" data-type="number" order="descending" />
				<xsl:sort select="bronze" data-type="number" order="descending" />
				
				<xsl:variable name="gold" select="gold" />
				<xsl:variable name="silver" select="silver" />
				<xsl:variable name="bronze" select="bronze" />
				
				<text y="400" x="{position()*100}"><xsl:value-of select="@name" /></text>
				<rect y="{380-$gold*10}" x="{position()*100}" height="{$gold*10}" width="15" style="fill:gold;stroke-width:1;stroke:rgb(0,0,0)" />
				<rect y="{380-$silver*10}" x="{position()*100+15}" height="{$silver*10}" width="15" style="fill:silver;stroke-width:1;stroke:rgb(0,0,0)" />
				<rect y="{380-$bronze*10}" x="{position()*100+30}" height="{$bronze*10}" width="15" style="fill:#BE5900;stroke-width:1;stroke:rgb(0,0,0)" />
				<text y="{380-$gold*10-5}" x="{position()*100}" style="font-size:0.8em;"><xsl:value-of select="$gold" /></text>
				<text y="{380-$silver*10-5}" x="{position()*100+16}" style="font-size:0.8em;"><xsl:value-of select="$silver" /></text>
				<text y="{380-$bronze*10-5}" x="{position()*100+32}" style="font-size:0.8em;"><xsl:value-of select="$bronze" /></text>
			</xsl:for-each>

			</svg>
		</div>
	</xsl:template>


</xsl:stylesheet>